<script lang="ts" setup>
import { onMounted, ref, getCurrentInstance } from "vue";
const input = ref("");
console.log(input.value);
const instance = getCurrentInstance();
onMounted(() => {
  if (instance) {
    const Util = instance?.appContext.config.globalProperties.$utils;
    console.log(Util);
  }
});

const submit = () => {
  throttling();
};
// 定义节流函数
const throttling = throttle(() => {
  console.log("节流后的");
  // 在这里执行你的逻辑
}, 700); // 300ms 的防抖时间
// --节流:更适合用于需要限制函数执行频率的场景，如滚动事件处理、窗口调整大小等。
function throttle(func: Function, wait: number) {
  let lastTime = 0;
  return function (this: any, ...args: any[]) {
    const now = Date.now();
    if (now - lastTime > wait) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}
// --普通方式监听滚动
// window.addEventListener('scroll', () => {
//   console.log('Scroll event handled');
// });
// --使用节流函数监听滚动
window.addEventListener(
  "scroll",
  throttle(() => {
    console.log("Scroll event handled");
  }, 300)
);
const handleInput = (event: any) => {
  debouncedInput(event.target.value);
};
// 定义防抖函数
const debouncedInput = debounce((value: any) => {
  console.log("防抖后的输入值:", value);
  // 在这里执行你的逻辑
}, 300); // 300ms 的防抖时间
// --防抖: 更适合用于用户操作完成后才需要执行的场景，如搜索框输入完成后的搜索请求。
function debounce(func: Function, wait: number) {
  let timeout: any;
  return function (this: any, ...args: any[]) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}
window.addEventListener(
  "resize",
  debounce(() => {
    console.log("Resize event handled");
  }, 300)
);
/**

 */
</script>
<template>
  <h2>js防抖、节流</h2>
  <input type="text" ref="input" @input="handleInput" />
  <button @click="submit">提交</button>
  <div v-for="i in 1000" :key="i">{{ i }}</div>
</template>
<style scoped lang="less"></style>
